<template>
  <el-container>
    <el-header>
      <custom-header/>
    </el-header>
    <el-main class="main" :style="'min-height:' + clientHeight + 'px'">
      <router-view v-slot="{ Component }">
        <transition>
          <component :is="Component"/>
        </transition>
      </router-view>
    </el-main>
    <custom-footer/>
  </el-container>
</template>

<script>
import CustomHeader from "./Header.vue";
import CustomFooter from "./Footer.vue";
import store from "../store";

export default {
  name: "LayoutIndex",
  components: {
    CustomHeader,
    CustomFooter
  },
  computed: {
    opened() {
      return !store.getters.getAsideStatus
    }
  },
  setup() {
    let clientHeight = document.documentElement.clientHeight - 120;
    if (clientHeight < 500) {
      clientHeight = 500;
    }
    store.commit("setMainHeight", clientHeight)
    return {
      clientHeight
    }
  }
};
</script>

<style scoped>
.el-container{
  height:100%;
  position: relative;
}
.el-header, .el-footer, .el-main {
  padding: 0!important;
}
.main {
  min-height: 942px;
  position: relative;
  max-width: 1400px;
  min-width: 1300px;
  margin: 0 auto;
  width: 100%;
}
.main::-webkit-scrollbar{
  width: 0;
  height: 0;
}
/*.el-footer {*/
/*  bottom: 0;*/
/*}*/
</style>
